import echarts from 'echarts'
import nameMap from './name'

const install = function(Vue){
	Object.defineProperties(Vue.prototype, {
		$charts:{
			get(){
				return {
					chinaMap(id,data){
						var myCharts = echarts.init(document.getElementById(id));
						var option = {
							//点击提示信息
							tooltip:{
								triggerOn:"click",
								enterable:true,
								formatter(data){
									// console.log(data);
									return "<a href='/#/city/"+data.name+"' style='color:#fff'><div><p>"+data.seriesName+":"+data.name+"</p><p>现存确诊："+data.value+"</p></div></a>"
								}
							},
							visualMap:[{   //映射区间
								type:"piecewise",   //分段型
								pieces:[
									{min:0,max:0,color:"#fff"},
									{min:1,max:10,color:"#fdfdcf"},
									{min:10,max:100,color:"#fe9e83"},
									{min:100,max:500,color:"#e55a4e"},
									{min:500,max:10000,color:"#4f070d"},
								]
							}],
							series:[{
								name:"省",
								type:"map",
								map:"china",
								roam:false,        //是否允许自动缩放
								zoom:1.2,          //缩放比例
								label:{
									//配置基本属性，字体颜色等
									normal:{
										show:true,//是否显示字体
										textStyle:{
											fontSize:9
										}
									}
								},
								itemStyle:{         //地图样式
									normal:{
										areaColor:"rgba(222,156,83,0)",
										borderColor:'rgba(0,0,0,0.4)',
									},
									emphasis: {     //阴影效果
                                        areaColor: 'rgba(0,0,0,0.3)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.9)'
                                    }
								},
								// data:[
								// 	{name:"内蒙古",value:10,itemStyle:{normal:{areaColor:"#f00"}}}
								// ]
								data:data
							}]
						}
						myCharts.setOption(option);
					},
					worldMap(id,data){
						var myCharts =document.getElementById(id);
						myCharts.style.width=window.innerWidth+'px';
						var chartObj=echarts.init(myCharts);
						var option ={
							tooltip:{
								formatter(data){
									// console.log(data);
									return "<div><p>"+data.seriesName+":"+data.name+"</p><p>现存确诊："+data.value+"</p></div>"
								}
							},
							visualMap:[{   //映射区间
								type:"piecewise",   //分段型
								pieces:[
									{min:0,max:0,color:"#fff"},
									{min:1,max:1000,color:"#fdfdcf"},
									{min:1000,max:10000,color:"#fe9e83"},
									{min:10000,max:500000,color:"#e55a4e"},
									{min:500000,max:10000000000,color:"#4f070d"},
								]
							}],
							series:[{
								name:"世界地图",
								type:"map",
								map:"world",
								roam:true,        //是否允许自动缩放
								zoom:1.8,          //缩放比例
								label:{
									//配置基本属性，字体颜色等
									normal:{
										show:false,  //是否显示字体
										textStyle:{
											fontSize:12,
											fontWeight:'bold',
											color:"#333333"
										}
									}
								},
								nameMap:nameMap,
								itemStyle:{         //地图样式
									normal:{
										areaColor:"rgba(222,156,83,0)",
										borderColor:'rgba(0,0,0,0.4)',
									},
									emphasis: {     //阴影效果
                                        areaColor: 'rgba(0,0,0,0.3)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.9)'
                                    }
								},
								// data:[
								// 	{name:"内蒙古",value:10,itemStyle:{normal:{areaColor:"#f00"}}}
								// ]
								data:data
							}]
						}
						chartObj.setOption(option);
					},
					provinceMap(id,cityName,data){
						console.log(data);
						var myCharts = echarts.init(document.getElementById(id));
						var option={
							tooltip:{
								formatter(data){
									// console.log(data);
									return "<div><p>"+data.seriesName+":"+data.name+"</p><p>现存确诊："+data.value+"</p></div>"
								}
							},
							visualMap:[{   //映射区间
								type:"piecewise",   //分段型
								pieces:[
									{min:0,max:0,color:"#fff"},
									{min:1,max:10,color:"#fdfdcf"},
									{min:10,max:50,color:"#fe9e83"},
									{min:50,max:500,color:"#e55a4e"},
									{min:500,max:1000,color:"#4f070d"},
								]
							}],
							series:[{
								name:"市",
								type:"map",
								map:cityName,
								roam:false,        //是否允许自动缩放
								zoom:1.2,          //缩放比例
								label:{
									//配置基本属性，字体颜色等
									normal:{
										show:true,//是否显示字体
										textStyle:{
											fontSize:12,
											fontWeight:'bold',
											color:"#333333"
										}
									}
								},
								itemStyle:{         //地图样式
									normal:{
										areaColor:"rgba(222,156,83,0)",
										borderColor:'rgba(0,0,0,0.4)',
									},
									emphasis: {     //阴影效果
                                        areaColor: 'rgba(0,0,0,0.3)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.9)'
                                    }
								},
								data:data
							}]
						}
						myCharts.setOption(option);
					}
				}
			}
		}
	})
}

export default install;
